<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref('')
let debounceTimer: number
const debouncedResult = ref('')

const handleDebounced = () => {
  clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => {
    debouncedResult.value = inputValue.value
  }, 500)
}

// Throttle
let throttleTimer: number | null = null
const throttledResult = ref('')

const handleThrottled = () => {
  if (!throttleTimer) {
    throttleTimer = setTimeout(() => {
      throttledResult.value = inputValue.value
      throttleTimer = null
    }, 500)
  }
}

const handleInput = () => {
  handleDebounced()
  handleThrottled()
}
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <div class="mb-4">
      <input
        v-model="inputValue"
        @input="handleInput"
        class="border-2 border-slate-300 text-slate-700 p-2 rounded focus:outline-none focus:border-slate-700 transition-colors"
        placeholder="Type something..."
      />
    </div>
    <div>
      <p>Debounced Result: {{ debouncedResult }}</p>
      <p>Throttled Result: {{ throttledResult }}</p>
    </div>
  </main>
</template>
